<template>
  <view class="my-container">
    <!-- 顶部用户信息区域 -->
    <view class="user-info-section">
      <view class="user-info">
        <image
          class="avatar"
          :src="
            isLoggedIn
              ? userInfo.avatar || '/static/images/default-avatar.png'
              : '/static/images/default-avatar.png'
          "
          mode="aspectFill"
        />
        <text class="login-button" v-if="!isLoggedIn" @tap="goToLogin">点击登录</text>
        <text class="username" v-else>{{ userInfo.username || '未设置昵称' }}</text>
      </view>
    </view>

    <!-- 功能列表区域 -->
    <view class="function-list">
      <view class="function-item" @tap="() => navigateTo('/pages/my/dynamics')">
        <view class="item-left">
          <image class="icon" src="/static/images/动态.png" mode="aspectFit" />
          <text class="text">我的动态</text>
        </view>
        <image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit" />
      </view>

      <view class="function-item" @tap="() => navigateTo('/pages/my/profile')">
        <view class="item-left">
          <image class="icon" src="/static/images/个人信息.png" mode="aspectFit" />
          <text class="text">个人信息</text>
        </view>
        <image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit" />
      </view>

      <view class="function-item" @tap="() => navigateTo('/pages/my/changePassword')">
        <view class="item-left">
          <image class="icon" src="/static/images/密码.png" mode="aspectFit" />
          <text class="text">修改密码</text>
        </view>
        <image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit" />
      </view>

      <view class="function-item" @tap="() => navigateTo('/pages/my/games')">
        <view class="item-left">
          <image class="icon" src="/static/images/游戏.png" mode="aspectFit" />
          <text class="text">我的游戏</text>
        </view>
        <image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit" />
      </view>

      <view class="function-item" @tap="() => navigateTo('/pages/my/comments')">
        <view class="item-left">
          <image class="icon" src="/static/images/评论.png" mode="aspectFit" />
          <text class="text">我的评论</text>
        </view>
        <image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 管理员功能区 -->
    <view class="function-list" v-if="isAdmin">
      <view class="admin-title">
        <text class="admin-badge">管理员</text>
        <text class="admin-text">管理功能</text>
      </view>

      <view class="function-item" @tap="() => navigateTo('/pages/admin/announcement')">
        <view class="item-left">
          <image class="icon admin-icon" src="/static/images/公告.png" mode="aspectFit" />
          <text class="text">管理员公告</text>
        </view>
        <image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit" />
      </view>

      <view class="function-item" @tap="() => navigateTo('/pages/admin/review')">
        <view class="item-left">
          <image class="icon admin-icon" src="/static/images/审核.png" mode="aspectFit" />
          <text class="text">内容审核</text>
        </view>
        <image class="arrow" src="/static/images/arrow-right.png" mode="aspectFit" />
      </view>
    </view>

    <!-- 显眼的退出登录按钮 -->
    <view class="logout-section" v-if="isLoggedIn">
      <button class="logout-button" @tap="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script>
import { logout, getCurrentUser } from '@/api/my'

export default {
  data() {
    return {
      userInfo: {},
      isLoggedIn: false,
      isAdmin: false,
    }
  },

  methods: {
    // 检查登录状态
    async checkLoginStatus() {
      const storedUserInfo = uni.getStorageSync('userInfo')
      if (storedUserInfo) {
        this.userInfo = storedUserInfo
        this.isLoggedIn = true

        // 调用后端接口获取当前用户信息，检查是否是管理员
        try {
          const res = await getCurrentUser()
          if (res.statusCode === 200 && res.data) {
            const { code, info, data } = res.data
            if (code === 200) {
              // 如果返回的用户名是 lmy，则设置为管理员
              if (data === 'lmy') {
                this.isAdmin = true

                // 更新本地存储的用户信息，添加管理员标识
                this.userInfo.isAdmin = true
                uni.setStorageSync('userInfo', this.userInfo)
              } else {
                this.isAdmin = false
                this.userInfo.isAdmin = false
                uni.setStorageSync('userInfo', this.userInfo)
              }
            }
          }
        } catch (error) {
          console.error('获取当前用户信息失败', error)
        }
      } else {
        this.isLoggedIn = false
        this.isAdmin = false
      }
    },

    // 处理退出登录
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              uni.showLoading({
                title: '退出中...',
              })

              const res = await logout()

              if (res.statusCode === 200 && res.data) {
                const { code, info } = res.data

                if (code === 200) {
                  // 清除本地存储的用户信息和token
                  uni.removeStorageSync('userInfo')
                  uni.removeStorageSync('token')

                  // 更新登录状态
                  this.isLoggedIn = false
                  this.userInfo = {}
                  this.isAdmin = false

                  uni.showToast({
                    title: '退出成功',
                    icon: 'success',
                  })
                } else {
                  uni.showToast({
                    title: info || '退出失败',
                    icon: 'none',
                  })
                }
              }
            } catch (error) {
              uni.showToast({
                title: '退出失败',
                icon: 'none',
              })
            } finally {
              uni.hideLoading()
            }
          }
        },
      })
    },

    navigateTo(url) {
      uni.navigateTo({ url })
    },

    goToLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
  },

  onLoad() {
    this.checkLoginStatus()
  },

  onShow() {
    this.checkLoginStatus()
  },
}
</script>

<style lang="scss">
// 薰衣草紫主题色
$theme-color: #9370db;
$light-theme-color: #e6e6fa;
$text-color: #333333;
$border-color: #eeeeee;

.my-container {
  min-height: 100vh;
  background-color: #f8f8f8;

  .user-info-section {
    background: linear-gradient(180deg, $theme-color 0%, $light-theme-color 100%);
    padding: 40rpx 30rpx;
    margin-bottom: 20rpx;

    .user-info {
      display: flex;
      align-items: center;
      padding: 30rpx;

      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 60rpx;
        margin-right: 30rpx;
        border: 4rpx solid #ffffff;
      }

      .login-button {
        color: #ffffff;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }

  .function-list {
    background-color: #ffffff;
    margin: 20rpx;
    border-radius: 12rpx;
    padding: 0 20rpx;

    .function-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 0;
      border-bottom: 2rpx solid $border-color;

      &:last-child {
        border-bottom: none;
      }

      .item-left {
        display: flex;
        align-items: center;

        .icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        .text {
          font-size: 28rpx;
          color: $text-color;
        }
      }

      .arrow {
        width: 32rpx;
        height: 32rpx;
        opacity: 0.6;
      }
    }
  }

  .logout-section {
    padding: 40rpx;
    margin-top: 40rpx;

    .logout-button {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(to right, #ff6b6b, #ff8585);
      color: #ffffff;
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 44rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.4);

      &:active {
        opacity: 0.9;
      }

      &::after {
        border: none;
      }
    }
  }
}

// 适配底部安全区
.my-container {
  padding-bottom: env(safe-area-inset-bottom);
}

.username {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
}

.admin-title {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 2rpx solid $border-color;

  .admin-badge {
    background-color: #ff6b6b;
    padding: 4rpx 12rpx;
    border-radius: 4rpx;
    margin-right: 12rpx;
  }

  .admin-text {
    font-size: 28rpx;
    color: $text-color;
  }
}

.admin-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
</style>
